<template>
  <div class="goodsInfo">
    <div class="desc">
      <div>{{ goodsInfo.title }}</div>
    </div>
    <div class="total-price">
      <div class="price">{{ goodsInfo.Price }}
        <div class="oldprice">{{ goodsInfo.OldPrice }}</div>
        <div class="discountdesc">{{ goodsInfo.discount }}</div>
      </div>
    </div>

    <div class="colums">
      <div v-for="(item,index) in goodsInfo.colums"
           class="colums-item"
        >{{ item }}
      </div>
    </div>

    <div class="service">
      <div class="service-item" v-for="(item,index) in goodsInfo.service" >
        <img :src="item.icon" alt=""> <span id="kaojin">{{item.name }}</span>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "DetailBaseinfo",
  props: {
    goodsInfo: {
      type: Object,
      default() {
        return {

        }
      }
    },
  },
  data() {
    return {

    }
  },

  created() {

  },

}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.desc {
  font-family: "Bodoni MT";
  font-weight: 550;
}
.desc div{
  padding: 5px;
}

.total-price {
  border-bottom: 3px whitesmoke solid;
  top: 8px;
  position: relative;
  display: flex;
}

.price {
  color: #ff8198;
}

.oldprice {
  top: 5px;
  position: absolute;
  left: 120px;
  font-size: 10px;
  color: darkgray;
  text-decoration: line-through; /*给文本加杠*/
}

.discountdesc {
  position: absolute;
  display: inline;
  background-color: #ff8198;
  font-size: 10px;
  left: 160px;
  flex: 1;
  top: -7px;
  color: white;
  border: solid;
  border-radius: 7px;
}

.colums {
  height: 30px;
  display: flex;
  margin-top: 25px;
  font-size: 14px;
  color: black;
  opacity: 0.5;
  border-bottom: 3px whitesmoke solid;
}

.colums-item {
  flex: 1;
}

.service {

  height: 30px;
  border-bottom: 3px whitesmoke solid;
  display: flex;
  margin-top: 13px;
  font-size: 10px;
  opacity: 0.9;
}

.service-item {
  flex: 1;
  float: left;
  margin-right: 3px;
}

.service img {
  width: 10px;
  height: 10px;
}
#kaojin{
  position: relative;
  right:2px;
}
#ex{
  margin-top: 4px;
}

</style>